<template>
  <div class="main theme-dark">
    <div class="recharge-open">
      <div class="bgpart">
        <div class="rechargeOpen">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" :tab="$t('Withdrawal')">
              <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
                <a-form-model-item :label="$t('地址')" prop="address">
                  <a-input
                    v-model="ruleForm.address"
                    :placeholder="$t('Please enter your address')"
                  />
                </a-form-model-item>
                <a-form-model-item :label="$t('coinType')" prop="coinType">
                  <a-select
                    v-model="ruleForm.coinType"
                    :placeholder="$t('Please select coin type')"
                    @change="coinTypeChange"
                  >
                    <a-select-option value="USDT">USDT</a-select-option>
                    <a-select-option value="ETH">ETH</a-select-option>
                    <a-select-option value="BTC">BTC</a-select-option>
                  </a-select>
                </a-form-model-item>
                <a-form-model-item :label="$t('提现金额')" prop="amount">
                  <a-input
                    v-model.number="ruleForm.amount"
                    :placeholder="$t('Please enter the withdrawal amount')"
                  />
                  <div class="balance-info">
                    <span>{{ $t('Available') }}：</span>
                    <span class="balance-amount">{{ accountAmount || 0 }} {{ ruleForm.coinType }}</span>
                  </div>
                </a-form-model-item>
                <a-form-model-item :label="$t('chainType')" prop="chainType">
                  <a-select
                    v-model="ruleForm.chainType"
                    :placeholder="$t('Please select chain type')"
                    :disabled="disabled"
                  >
                    <a-select-option value="TRC20">TRC20</a-select-option>
                    <a-select-option value="ERC20">ERC20</a-select-option>
                    <a-select-option value="BITCOIN" v-if="ruleForm.coinType == 'BTC'">
                      BITCOIN
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
                <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                  <a-button type="primary" @click="submitForm('ruleForm')">
                    {{ $t('Submit') }}
                  </a-button>
                </a-form-model-item>
              </a-form-model>
            </a-tab-pane>
            <a-tab-pane key="2" :tab="$t('Withdrawal record')">
              <div>
                <div class="el-table el-table--fit el-table--enable-row-hover" style="width: 100%">
                  <a-table :columns="columns" :data-source="list" :pagination="false"></a-table>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Table } from 'ant-design-vue'
// import Upload from '@/components/Upload.vue'
import { fetchAccount } from '@/api/asset'
import { stockWithdrawApply, stockWithdrawList } from '@/api/stock'

export default {
  components: {
    ATable: Table
    // Upload
  },
  data() {
    return {
      columns: [
        {
          title: this.$t('CoinType'),
          dataIndex: 'coinType'
        },
        {
          title: this.$t('Amount'),
          dataIndex: 'amount'
        },
        {
          title: this.$t('Time'),
          dataIndex: 'createTime'
        },
        {
          title: this.$t('status'),
          dataIndex: 'status',
          customRender: (text) =>
            ['', this.$t('Completed'), this.$t('Rejected'), this.$t('Pending Review')][text]
        }
      ],
      loading: false,
      form: {
        amount: 100,
        img: '',
        id: ''
      },
      list: [],
      data: {
        address: ''
      },
      ruleForm: {
        address: '',
        amount: '',
        coinType: null,
        chainType: null
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 }
      },
      rules: {
        address: [{ required: true, message: this.$t('Please enter your address') }],
        coinType: [{ required: true, message: this.$t('Please select coin type') }],
        amount: [{ required: true, message: this.$t('Please enter the withdrawal amount') }],
        chainType: [{ required: true, message: this.$t('Please select chain type') }]
      },
      accountAmount: 0
    }
  },
  computed: {
    disabled() {
      return ['ETH', 'BTC'].includes(this.ruleForm.coinType)
    }
  },
  methods: {
    getAccount() {
      fetchAccount({ type: 'trade', name: this.ruleForm.coinType }).then((resp) => {
        this.accountAmount = resp.data
      })
    },
    coinTypeChange(val) {
      this.getAccount()
      // if (val === 'ETH')
      this.ruleForm.chainType = val === 'ETH' ? 'ERC20' : val === 'BTC' ? 'BITCOIN' : ''
      if(['ETH','ERC20'].includes(val)) this.$refs.ruleForm.validateField('chainType')
    },
    loadAssetsRechargeMy() {
      stockWithdrawList().then((res) => {
        this.list = res.data
      })
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          stockWithdrawApply(this.ruleForm).then(() => {
            this.$Success({ title: this.$t('提现申请提交成功') })
          })
        }
      })
    }
  },
  mounted() {
    this.loadAssetsRechargeMy()
    if(this.$route.query && this.$route.query.coinType) {
      const coinType = this.$route.query.coinType
      this.ruleForm.coinType = coinType
      this.coinTypeChange(coinType)
    }
  }
}
</script>

<style lang="scss" scoped>
.opacity0 {
  opacity: 0;
}

.main {
  background-color: #0b0e11;

  .recharge-open {
    width: 1000px;
    margin: 0 auto;
    min-height: 100vh;
    padding-top: 20px;

    .open-header {
      text-align: center;
      padding: 40px 0;

      .textaddress {
        color: #999;
        margin-top: 20px;
      }

      .address {
        margin: 20px 0 40px;
        font-size: 24px;
      }

      .qr-btn {
        padding: 0 40px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        height: 44px;
        border-radius: 20px;
        margin: 0 auto;
        font-size: 16px;
        color: #212833;
        cursor: pointer;
        background: #fcd535;
      }
    }
  }

  .open-form {
    display: block;
    margin: 20px 0;
    font-size: 14px;

    .text {
      display: block;
      margin: 20px 0;
      font-size: 14px;
    }

    .flex-a {
      width: 140px;
      height: 140px;
      position: relative;
      margin: 0 auto;
    }

    .poImg {
      position: absolute;
      width: 140px;
      height: 140px;
      top: 0;
      left: 0;
    }
  }

  .sub-btn {
    width: 400px;
    border-radius: 20px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    background: #fcd535;
    color: #212833;
    margin: 50px auto 0;
    cursor: pointer;
  }
}

.ant-statistic-title {
  margin-bottom: 4px;
  color: #999;
  font-size: 14px;
}
</style>
